<template>
  <CommonPage :show-header="false">
    <article class="margin-top-sm flex  flex-column flex-sub">
      <section>
      <n-tabs type="segment" v-model:value="tab" @update-value="tabChange">
        <n-tab-pane v-for="(item,index) in tabs" :name="item.name" :tab="item.tab" :key="index">
        </n-tab-pane>
      </n-tabs>
      </section>
      <section  style="overflow:hidden" class="flex flex-sub radius-lg bg-white  padding-tb-sm">
      <CurdTable ref="tableRef"
                 :get-data="api.user.list"
                 :columns="columns" :and-params="andParams" :or-params="orParams" :order-params="orderParams">
      </CurdTable>
      </section>
    </article>

    <InfoModal v-model:show="showModal" v-model:data="dataModal">
      <template #tail>
        <div style="text-align: center">
          <n-button style="width: 40%;margin: 5px" type="success" @click="handleAgree(dataModal)">同意</n-button>
          <n-button style="width: 40%;margin: 5px" type="error" @click="handleDisagree(dataModal)"> 拒绝</n-button>
        </div>
      </template>
    </InfoModal>
  </CommonPage>
</template>

<script setup lang="ts">
import CommonPage from "@/components/page/CommonPage.vue";
import CurdTable from "@/components/common/table/CurdTable.vue";
import {h, onMounted, ref, VNodeChild} from "vue";
import api from '@/api'
import {NAvatar, NButton, NText} from "naive-ui";
import StatusTag from "@/components/common/tag/StatusTag.vue";
import InfoModal from "@/components/example/modal/InfoModal.vue";
import {imagePathPrefix} from '~/settings'
const tabs = [
  {
    name: '1',
    tab: '本院职工',
  },
  {
    name: '3',
    tab: '管理员',
  },
]
const tab = ref('1')
const tableRef = ref()
const loading = ref(false)
const searchKey = ref('')


const prefix =imagePathPrefix
const columns = [
  {title: 'ID', key: 'id', width: 2, ellipsis: {tooltip: true}},
  {
    title: '头像', key: 'avatar', width: 5, ellipsis: {tooltip: true},
    render(row: any) {
      return h(NAvatar, {
        width: 100,
        src: prefix+row.avatar || "https://www.zzjtpp.top/blogAPI/uploadFile/%E5%A4%B4%E5%83%8F.bmp",
        round: true
      })
    }
  },
  {
    title: '用户名', key: 'username', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '16px'}}, {default: () => row.username})
    }
  },
  {
    title: '身份状态', key: 'status', width: 6, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(StatusTag, {style: {fontSize: '20px'}, status: row.status}, {})
    }
  },
  {
    title: '操作', key: 'actions', width: 10, align: 'center',
    render(row: any) {
      return [h(NButton, {round: true, secondary: true, onClick: () => handleInfo(row)}, {default: () => "详情"}),
        h(NButton, {
          round: true,
          secondary: true,
          type: "primary",
          onClick: () => handleAgree(row)
        }, {default: () => "同意"}),
        h(NButton, {
          round: true,
          secondary: true,
          type: "error",
          onClick: () => handleDisagree(row)
        }, {default: () => "拒绝"}),]
    }
  }
]
const showModal = ref(false)
const dataModal = ref()
onMounted(() => {
  search()
})
const tabChange = (value: string) => {
  tab.value = value
  if (value === '1') {
    andParams.value.status = '33'
  } else if (value === '2') {
    andParams.value.status = '44'
  } else if (value === '3') {
    andParams.value.status = '55'
  }
  search()
}
const handleInfo = (row: any) => {
  showModal.value = true
  dataModal.value = row
}

/** QueryBar筛选参数（可选） */
const orParams = ref({
  username: '',
  id: '',
})
/** 补充参数（可选） */
const andParams = ref({
  status: '33',
})
/** 排序参数(可选）*/
const orderParams = ref({
  loginTime: '',
})


const handleAgree = (row: any) => {
  window.$dialog.info({
    title: '提示',
    content: '是否确认此操作？',
    positiveText: '确认',
    negativeText: '取消',
    onPositiveClick: () => {
      let func: any
      if (tab.value === "1") {
        func = api.nurse.agreeByUsername({
          targetUsername: row.username
        })
      } else if (tab.value === "2") {
        func = api.specialist.agreeByUsername({
          targetUsername: row.username
        })
      } else if (tab.value === "3") {
        func = api.admin.agreeByUsername({
          targetUsername: row.username
        })
      }
      func.then((res: { data: { code: number; msg: string | (() => VNodeChild); }; }) => {
        if (res && res.data.code === 0) {
          window.$message.success(res.data.msg)
          search()
        }
      })
    },
    onNegativeClick: () => {

    }
  })
}

const handleDisagree = (row: any) => {
  window.$dialog.info({
    title: '提示',
    content: '是否确认此操作？',
    positiveText: '确认',
    negativeText: '取消',
    onPositiveClick: () => {
      let func: any
      if (tab.value === "1") {
        func = api.nurse.disAgreeByUsername({
          targetUsername: row.username
        })
      } else if (tab.value === "2") {
        func = api.specialist.disAgreeByUsername({
          targetUsername: row.username
        })
      } else if (tab.value === "3") {
        func = api.admin.disAgreeByUsername({
          targetUsername: row.username
        })
      }
    func.then((res: { data: { code: number; msg: string | (() => VNodeChild); }; }) => {
        if (res.data.code === 0) {
          window.$message.success(res.data.msg)
          search()
        }
      })
    },
    onNegativeClick: () => {

    }
  })
}

const search = async () => {
  loading.value = true
  Object.keys(orParams.value).forEach((key: any) => {
    //@ts-ignore
      orParams.value[key] = `%${searchKey.value}%`
  })
  await tableRef.value.handleSearch()
  loading.value = false
}
</script>

<style scoped>

</style>